<template>
  <div class="receivable-fee-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <super-table
        :height="tableHeight"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
        :sort-config="{ remote: true }"
        @sort-change="sortChangeHandle"
      >
        <template #tool>
          <a-button type="primary" @click="downloadDataHandle">批量导出</a-button>
          <a-button type="primary" @click="createBillHandle" v-btnAuth="'RECEIVABLEFEE_REVERSE_APPROVA'">生成对账单</a-button>
          <a-button type="primary" @click="reverseApprovalHandle" v-btnAuth="'RECEIVABLEFEE_ANTI_AUDIT'">反审核</a-button>
          <a-button type="primary" @click="previewFeeHandle">预览</a-button>
          <a-button type="primary" @click="showStatictisHandle">查看统计</a-button>
        </template>
        <template #waybillNum="{ row }">
          {{ row.waybillNum }}
        </template>
        <template #addressType="{ row }">
          <a-tag v-if="row.addressType === 'AMAZON'" color="#108ee9">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'WALMART'" color="#2db7f5">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'PERSONALWAR'" color="#f50">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
        </template>
        <template #state="{ row }">
          <a-tag v-if="row.state === 3" color="#cccc"> 待审批 </a-tag>
          <a-tag v-if="row.state === 4" color="#f40"> 审批拒绝 </a-tag>
          <a-tag v-if="row.state === 5" color="#87d068"> 审批通过 </a-tag>
        </template>
        <template #footer>
          <span v-if="tableRef">
            已选金额: <span class="emphasis-item">{{ selectAmount }}</span>
          </span>
        </template>
      </super-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" @close="getData" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="true" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component
        v-model:visible="dialogOpts.visible"
        :init="getStatisticsDataFn"
        :column="statisticsColumn"
        :is="dialogOpts.component"
        :type="dialogOpts.type"
        :pass-data="dialogOpts.passData"
        @submit="dialogSubmitHandle"
      ></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import CreateBill from "./components/createBill/index.vue";
import PreviewFee from "./components/previewFee/index.vue";
import DataStatistics from "@/components/dataStatistics/index.vue";
import TableHook from "@/hook/tableHook";
export default {
  name: "ReceivableFee",
  components: {
    CreateBill,
    PreviewFee,
    DataStatistics
  }
};
</script>
<script lang="ts" setup>
import TableHeightHook from "@/hook/tableHeightHook";
import ModalHook from "@/hook/modalHook";
import CommonHook from "@/hook/commonHook";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { searchItemList, tableColumn, statisticsColumn } from "./data";
import { onActivated } from "vue";
const { tableHeight, loading } = TableHeightHook(50);
const { getLabelByDict } = CommonHook();
const { tableData, searchForm, drawerOpts, tableRef, dialogOpts } = InitHook();
const { searchHandle, getData, createBillHandle, selectAmount, reverseApprovalHandle, previewFeeHandle, getStatisticsDataFn, showStatictisHandle, downloadDataHandle } = OperationHook({
  searchForm,
  tableData,
  drawerOpts,
  loading,
  tableRef,
  dialogOpts
});
onActivated(() => {
  getData();
});
const { sortChangeHandle } = TableHook({ searchForm }, getData);
const { drawerSubmitHandle, dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => getData()
});
</script>
<style lang="stylus" scoped>
.receivable-fee-page{
    .emphasis-item {
        color: #fe8100;
        font-weight: 600;
    }
}
</style>
